<template>
    <div class="news-container">
        <h3 class="title">{{ newInfo.title }}</h3>
        <p class="info">
            <span>发表时间:{{ newInfo.add_time | dateFormat}}</span>
            <span>点击次数: {{ newInfo.click }}</span>
        </p>
        <hr>
        <div class="content" v-html="newInfo.content"></div>
        <!--评论子组件-->
        <Comment :id="id"></Comment>
    </div>
</template>

<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import Comment from '@/components/common-components/comment.vue';


  @Component({components: {Comment}})
  export default class NewInfo extends Vue {
    @Prop() private id!: number;
    private newInfo: any = [];

    private created(): void {
      this.getNewInfo();
      console.log(this.newInfo);
    }

    private async getNewInfo() {
      const {data} = await this.$http.get('http://www.liulongbin.top:3005/api/getnew/' + this.id);
      if (data.status === 0) {
        return this.newInfo = data.message[0];
      }
    }
  }
</script>

<style scoped lang="scss">
    .news-container {
        padding-top: 3px;

        .title {
            color: darkred;
            font-size: 15px;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }
    }
</style>

